Skip to main content

Next.js 可以靜態部屬內嵌式網頁嗎

Can Next.js do static embedded deployment ?

（圖一）

緣起​

答案是，可以做到，只是有些注意事項

處理案子有時會需要我們部屬到他們指定的伺服器資料夾位置，更不用說客戶擁有自己的 Header 與 Footer（圖一），這樣子的情況適合使用 Next.js 嗎

（圖一）以我的網頁為例，最上方 HEADER 是客戶網頁自帶且固定的，而下方就是我們案子所需要處理的部分，需要嵌入靜態 html

Next.js 內嵌部屬注意事項 embedded deployment conditions​

相對路徑問題 relative bathPath issue​

Next.js 要解決前述所提及「部屬到他們指定的伺服器資料夾位置」就需要下一番功夫了，假設客戶希望你部屬到他們 /projectA 資料夾，我們就需要在 next.js 當中設置 basePath


// next.config.js

module.exports = {
  output: "export", // 靜態部屬需設定 output 為 export
  basePath: "/projectA", // 或使用 assetsPrifix:
}

這時候他們的網頁可能為 https://yoursite/projectA/ 指向你所部屬的資料夾 index.html 才能正常預覽，否則高機率出現 css 與 js  抓不到，或是連 html 都無法顯示導致白畫面，同樣的方式也應用在 next.js 靜態部屬至 github 方法可參見這篇文章 Next.js and GitHub Pages, how the basePath and assetPrefix configuration options will fix your website。

而一般我們在處理自己的網頁或 side project 時就不會遇到這麼多問題，除了整個專案都是用同一套 next.js 框架建立之外，netlify 或 vercel 也會在背後處理這些路徑問題。

關於 Next.js 相對路徑的問題，已經有一番討論了，請洽 Next.js basePath should be / when using a custom URL。

使用 vite 靜態部屬 SPA 內嵌式網頁，以 React 為例​

縱使 next.js 內建眾多優秀的功能，像是內建 SSR、SSG、或是 <Image/>，遵照著絕對路徑的步驟仍無法解決你的白畫面（無法顯示）的問題，回歸到傳統的 SPA 方法來打包或許是不錯的選擇，而我選用的環境打包工具就是 vite。

雖然 vite 沒有內建那些好用的功能，但是他做到幾件事情

  1. 簡單地設定相對路徑，參考 vite.config.js-base-path
  2. 他就是一個好用的 SPA 打包工具

下列是一個簡單的 SPA 例子

假設部屬環境有客戶自帶的 html Layout 標籤，我至少能用直覺推斷 React 會在 <div id="root"></div> 注入


<body>

  <header>blah blah blah</header>

  <!-- React is here -->
  <div id="root"></div>
  <!-- React is here -->

  <footer>blah blah blah</footer>

  <script type="module" src="/src/main.tsx"></script>

</body>


import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";


ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <App />
);

結論：使用 Next.js 部屬 SPA，有可能嗎 Deploying nextjs app as an SPA ?​

引述一下 reddit 這篇文章所討論到的問題 Deploying nextjs app as an SPA?，有沒有可能使用 Next.js 混和 SSR + SPA，老實說可以而且不複雜，大方向是在 Next.js SSR渲染階段阻擋伺服器渲染到 React Router 的頁面，詳細請洽這篇文章 Building a single-page application with Next.js and React Router

要注意的是，這方法適用於部屬 SSR 的情況下，靜態部屬的情況下不見得有效